<style>
    ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;overflow-y:scroll;overflow-x:auto;}
</style>

<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 文章管理 <span class="c-gray en">&gt;</span> 文章列表
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="page-container">
    <form method="post">
        <div class="text-c">
            <!-- 树插件 start -->
            <input type="text" class="input-text" style="width:120px" id="citySel" name="articlecategory" value="{$Request.param.articlecategory}" placeholder="分类" onclick="showMenu(); return false;" readonly>
            <input type="hidden" name="category_id">
            <div id="menuContent" class="menuContent" style="display:none; position: fixed;z-index: 15;">
                <ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul>
            </div>
            <!-- 树插件 end -->
            日期范围：
            <input type="text" onfocus="select_time(this)" name="start_time" value="{$Request.param.start_time}" class="input-text Wdate" style="width:120px;">
            -
            <input type="text" onfocus="select_time(this)" name="end_time" value="{$Request.param.end_time}" class="input-text Wdate" style="width:120px;">
            <input type="text" name="keywords" value="{$Request.param.keywords}" placeholder=" 标题关键字" style="width:250px" class="input-text">
            <button type="button" class="btn btn-success js_btn_submit"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
        </div>
    </form>
    <div class="cl pd-5 bg-1 bk-gray mt-20">
		<span class="l">
			<a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a><a class="btn btn-primary radius" data-title="添加" data-href="{:url('add')}" onclick="Hui_admin_tab(this)" href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加</a>
		</span>
        <span class="r">共有数据：<strong>54</strong> 条</span>
    </div>
    <div class="mt-20">
        <!-- 表格内容 start -->
        <table class="table table-border table-bordered table-bg table-hover table-sort">
            <thead>
            <tr class="text-c">
                <th width="25"><input type="checkbox" name="" value=""></th>
                <th width="60">ID</th>
                <th width="120">标题</th>
                <th>描述</th>
                <th width="80">分类</th>
                <th width="120">创建时间</th>
                <th width="120">更新时间</th>
                <th width="80">浏览次数</th>
                <th width="80">发布状态</th>
                <th width="120">操作</th>
            </tr>
            </thead>
            <tbody>
            {volist name="list" id="vo"}
            <tr class="text-c" data-id="{$vo['id']}">
                <td><input type="checkbox" value="" name=""></td>
                <td>{$vo['id']}</td>
                <td class="text-l">
                    <u style="cursor:pointer" class="text-primary" data-href="{:url('edit', array('id'=>$vo['id']))}" onclick="article_edit('编辑',this)" title="查看">{$vo['title']}</u>
                </td>
                <td class="text-l">{$vo['description']|strip_tags}</td>
                <td>{$vo['category']['name']}</td>
                <td>{$vo['create_time']}</td>
                <td>{$vo['update_time']}</td>
                <td>{$vo['views']}</td>
                <td class="td-status">
                    {switch name="vo['status']"}
                    {case value="0"}
                    <a class="label label-defaunt radius" data-href="{:url('changeStatus')}" onclick="article_start(this)">已下架</a>
                    {/case}
                    {case value="1"}
                    <a class="label label-success radius" data-href="{:url('changeStatus')}" onclick="article_stop(this)">已发布</a>
                    {/case}
                    {default /}未知
                    {/switch}
                </td>
                <td class="f-14 td-manage">
                    <a style="text-decoration:none" class="ml-5" data-href="{:url('edit', array('id'=>$vo['id']))}" onclick="article_edit('编辑',this)" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>
                    <a style="text-decoration:none" class="ml-5" data-href="{:url('delete')}" onclick="article_del(this)" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>
                </td>
            </tr>
            {/volist}
            </tbody>
        </table>
        <!-- 表格内容 end -->
    </div>
</div>

<!--请在下方写此页面业务相关的脚本-->
<script src="/admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script src="/admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script src="/admin/lib/laypage/1.2/laypage.js"></script>
<script src="/admin/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<link rel="stylesheet" href="/admin/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css">
<script>
    /* 树插件-回调函数 start */
    function selectNode(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj('treeDemo'),
            nodes = zTree.getSelectedNodes(),
            nodeId = '',
            nodeName = '';
        //排序
        nodes.sort(function compare(a,b){return a.id-b.id;});
        //遍历（多选的）节点
        for (var i=0, l=nodes.length; i<l; i++) {
            nodeId += nodes[i].id + ',';
            nodeName += nodes[i].name + ',';
        }
        if (nodeId.length > 0 ){
            nodeId = nodeId.substring(0, nodeId.length-1);
            nodeName = nodeName.substring(0, nodeName.length-1);
        }
        $('[name="category_id"]').attr('value', nodeId);
        $("#citySel").attr("value", nodeName);
    }

    function showMenu() {
        var cityObj = $("#citySel");
        var cityOffset = cityObj.offset();
        $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }
    /* 树插件-回调函数 end */

    $(function(){
        //提交表单
        $(document).on('click', '.js_btn_submit', function(e){
            $form = $(this).parents('form');
            $form.submit();
            return false;
        });

        //树插件
        // zTree 的参数配置
        var setting = {
            view: {
                dblClickExpand: false,
                //禁止多选
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: 'id',
                    pIdKey: 'pid',//父级id的键
                    rootPId: null //（根节点）父级id的值
                }
            },
            callback: {
                onClick: selectNode
            }
        };
        //ajax获取分类列表
        $.ajax({
            url: '/index.php/admin/category/getList',
            success: function(response){
                if (response.code == '1') {
                    //获取成功
                    var zTree = $.fn.zTree.init($('#treeDemo'), setting, response.data);//实例化zTree
                    var nodes = zTree.getNodes();
                    if (nodes.length>0) {
                        zTree.expandNode(nodes[nodes.length-1], true, true, true);//展开最后一个根节点（包括其全部子节点）
                    }
                }else{
                    layer.msg('无法获取分类列表，请刷新。', {icon:0,time:3000});
                }
            },
            error: function(data){
                layer.msg('发送失败!',{icon:0,time:3000});
            }
        });
    });

    /*表格插件*/
    $('.table-sort').dataTable({
        "aaSorting": [[ 1, "desc" ]],//默认第几个排序
        "bStateSave": true,//状态保存
        "aoColumnDefs": [
            //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
            {"orderable":false,"aTargets":[0,7]}// 不参与排序的列
        ]
    });

    /*资讯-添加*/
    function article_add(title,url,w,h){
        var index = layer.open({
            type: 2,
            title: title,
            content: url
        });
        layer.full(index);
    }
    /*资讯-编辑*/
    function article_edit(title, obj){
        var index = layer.open({
            type: 2,
            title: title,
            content: $(obj).attr('data-href')
        });
        layer.full(index);
    }
    /*资讯-删除*/
    function article_del(obj){
        var sUrl = $(obj).attr('data-href');
        layer.confirm('确认要删除吗？',function(index){
            $.ajax({
                type: 'POST',
                url: sUrl,
                data: {'id':$(obj).parents('tr').attr('data-id')},
                dataType: 'json',
                success: function(response){
                    if (response.code == 1) {
                        //删除成功
                        $(obj).parents("tr").remove();
                        layer.msg('已删除!',{icon:1,time:1000});
                    }else{
                        layer.msg(response.msg,{icon:0,time:3000});
                    }
                },
                error:function(data) {
                    layer.msg('发送失败!',{icon:0,time:3000});
                },
            });
        });
    }

    /*资讯-下架*/
    function article_stop(obj){
        layer.confirm('确认要下架吗？',function(index){
            var sUrl = $(obj).attr('data-href');
            $.ajax({
                type: 'POST',
                url: sUrl,
                data: {
                    'id': $(obj).parents('tr').attr('data-id'),
                    //停用
                    'status': '0'
                },
                success: function(response){
                    if (response.code == 1) {
                        //成功后的前台处理……
                        $(obj).removeClass('label-success').addClass('label-defaunt').attr('onclick', 'article_start(this)').text('已下架');
                        layer.msg('已下架!',{icon: 5,time:1000});
                    }else{
                        layer.msg(response.msg,{icon:0,time:3000});
                    }
                },
                error: function(data){
                    layer.msg('发送失败！',{icon:0,time:3000});
                }
            });

        });
    }

    /*资讯-发布*/
    function article_start(obj){
        layer.confirm('确认要发布吗？',function(index){

            var sUrl = $(obj).attr('data-href');
            $.ajax({
                type: 'POST',
                url: sUrl,
                data: {
                    'id': $(obj).parents('tr').attr('data-id'),
                    //启用
                    'status': '1'
                },
                success: function(response){
                    if (response.code == 1) {
                        //成功后的前台处理……
                        $(obj).removeClass('label-defaunt').addClass('label-success').attr('onclick', 'article_stop(this)').text('已发布');
                        layer.msg('已发布!',{icon: 6,time:1000});
                    }else{
                        layer.msg(response.msg,{icon:0,time:3000});
                    }
                },
                error: function(data){
                    layer.msg('发送失败！',{icon:0,time:3000});
                }
            });

        });
    }

    /* 通过js函数选择日期（解决与Thinkphp模版标签冲突） */
    function select_time(obj){
        var selected_time = $(obj).val();
        if (selected_time != '') {
            WdatePicker({dateFmt:'yyyy-MM-dd',maxDate:selected_time});
        }else{
            WdatePicker({dateFmt:'yyyy-MM-dd'});
        }
    }
</script>